<template>
  <div class="modal-form-container">
    <vuescroll :ops="ops">
      <Form class="mr10 ml10" ref="info" :model="formData" :label-width="150" :rules="rules">
        <FormItem :label="$t('o9MoZ8GYpy_bxl_Uh62i0')">
          <Input v-model="formData.cardid" disabled />
        </FormItem>
        <ReadIcCard
          @set-num="setNumber"
        />
        <FormItem :label="$t('z3zbpYCEXz3ftVHT73-gC')">
          <Input v-model="formData.custid" disabled />
        </FormItem>
        <FormItem :label="$t('vlcfeLzbR37D0GdQdbaoj') + '(' + $t('rEwoS7D6EkR6EPGHSq6MU') + ')'">
          <Input v-model="formData.rechargebeforemoney" disabled/>
        </FormItem>
        <FormItem :label="$t('OgCXwvjA3Bh7NoI3335mj') + '(' + $t('rEwoS7D6EkR6EPGHSq6MU') + ')'" prop="rechargemoney">
          <Input v-model="formData.rechargemoney"/>
        </FormItem>
        <FormItem :label="$t('aWE0A8HStCgsdlLI3BDTA')">
          <Input v-model="formData.rechargeoperator" disabled />
        </FormItem>

        <FormItem>
          <Button type="primary" @click="save">{{$t('Ywv2X5XkMicIrgIbaCZI3')}}</Button>
          <Button style="margin-left: 8px" @click="close">{{$t('JueO39I1jRqJkSh6Wtld-')}}</Button>
        </FormItem>
      </Form>
    </vuescroll>
  </div>
</template>

<script>
import vuescroll from 'vuescroll'
import { rechargeCardId } from '@/api/data2'
import ReadIcCard from './read-ic-card'

export default {
  name: 'recharge_form_info',
  components: {
    vuescroll,
    ReadIcCard
  },
  props: {
    data: Object,
    status: String
  },
  data () {
    return {
      ops: {
        scrollPanel: {
          maxHeight: 500
        }
      },
      formData: _.cloneDeep(this.data),
      rules: {
        rechargemoney: [{ required: true, message: this.$t('wXotjLC-TbA_OTLM9dES4'), trigger: 'blur' }]
      }
    }
  },
  methods: {
    close () {
      this.$emit('close')
    },
    setNumber (num) {
      this.formData.cardid = num
    },
    transform () {
      return Object.assign({}, this.formData, {
        rechargemoney: +this.formData.rechargemoney
      })
    },
    async save () {
      this.$refs.info.validate(async valid => {
        if (valid) {
          const data = this.transform()
          const { code, desc } = await rechargeCardId({ ...data })
          if (code == 200) {
            this.$emit('success', desc)
          } else {
            this.$emit('fail', desc)
          }
        }
      })
    }
  }
}
</script>

<style lang="stylus" scoped>
.download
  margin-bottom: 24px;
  padding-left: 150px;
</style>
